<template>
    <div>
        <div class="nav">
            <div @click="changeRouter('home')" :class="{active:active=='home'}">
                <van-icon name="home-o" size=".88rem"/>
                <span>首页</span>
            </div>
            <div @click="changeRouter('category')" :class="{active:active=='category'}">
                <van-icon name="apps-o" size=".88rem"/>
                <span>分类</span>
            </div>
            <div @click="changeRouter('cart')" :class="{active:active=='cart'}">
                <van-icon name="shopping-cart-o" size=".88rem"/>
                <span>购物车</span>
            </div>
            <div @click="changeRouter('my')" :class="{active:active=='my'}">
                <van-icon name="friends-o" size=".88rem"/>
                <span>个人中心</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            active:location.hash.slice(2)
        }
    },
    methods: {
        changeRouter(router) {
            this.active = router
            // 子传父
            // location.hash = "#/" + router
            this.$router.push("/" + router,()=>{},()=>{})
            // this.$emit("changeRouter", router, index)
        }
    },
}
</script>

<style scoped>

.nav {
    height: 2rem;
    width: 15rem;
    position: fixed;
    bottom: 0;
    display: flex;
    font-size: 0.48rem;
    background: white;
}

.nav>div {
    width: 25%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.nav div img{
    width: .88rem;
    height: .88rem;
}

.active {
    color: #1ba784;
}
</style>